import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class StaggeredPage extends StatefulWidget {
  const StaggeredPage({super.key});

  @override
  State<StaggeredPage> createState() => _StaggeredPageState();
}

class _StaggeredPageState extends State<StaggeredPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('瀑布流')),
      body: SingleChildScrollView(
        child: StaggeredGrid.count(
          crossAxisCount: 2,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          children: [
            StaggeredGridTile.count(
              crossAxisCellCount: 2,
              mainAxisCellCount: 2,
              child: Title(
                color: Colors.red,
                child: const Text('100'),
              ),
            ),
            Container(
              width: 500,
              height: 100,
              color: Colors.red,
              child: const Text('1'),
            ),
            Container(
              width: 500,
              height: 200,
              color: Colors.green,
              child: const Text('2'),
            ),
            Container(
              width: 500,
              height: 300,
              color: Colors.blue,
              child: const Text('3'),
            ),
            Container(
              width: 500,
              height: 150,
              color: Colors.cyan,
              child: const Text('4'),
            ),
            Container(
              width: 500,
              height: 60,
              color: Colors.yellow,
              child: const Text('5'),
            ),
            Container(
              width: 500,
              height: 200,
              color: Colors.green,
              child: const Text('2'),
            ),
            Container(
              width: 500,
              height: 300,
              color: Colors.blue,
              child: const Text('3'),
            ),
            Container(
              width: 500,
              height: 150,
              color: Colors.cyan,
              child: const Text('4'),
            ),
            Container(
              width: 500,
              height: 60,
              color: Colors.yellow,
              child: const Text('5'),
            )
          ],
        ),
      ),
    );
  }
}
